<template>
    <div>
        <div class="button-area">
            <Button @click="save()" :loading="saveLoading" type="primary" class="button-right-left">保存</Button>
            <Button @click="back()" class="button-right">返回</Button>
        </div>
        <div class="form-area">
            <Form style="width: 900px" :model="model" :label-width="110" label-position="left" inline>
                                <FormItem :class="{'model-hidden': true}" label="文本框">
                        <Input v-model="model.postId"  type="text"></Input>
                    </FormItem>
                    <FormItem :class="{'model-hidden': true}" label="文本框">
                        <Input v-model="model.createBy"  type="text"></Input>
                    </FormItem>
                    <FormItem :class="{'model-hidden': true}" label="文本框">
                        <Input v-model="model.createTime"  type="text"></Input>
                    </FormItem>
                    <FormItem :class="{'model-hidden': true}" label="文本框">
                        <Input v-model="model.updateBy"  type="text"></Input>
                    </FormItem>
                    <FormItem :class="{'model-hidden': true}" label="文本框">
                        <Input v-model="model.updateTime"  type="text"></Input>
                    </FormItem>
                          <FormItem  label="岗位编码">
                              <Input v-model="model.postCode" style="width:320px" type="text"></Input>
                          </FormItem>
                          <FormItem  label="岗位名称">
                              <Input v-model="model.postName" style="width:320px" type="text"></Input>
                          </FormItem>
                          <FormItem  label="排序">
                              <Input v-model="model.postSort" style="width:320px" type="text"></Input>
                          </FormItem>
                          <FormItem label="状态">
                              <Select v-model="model.status" style="width: 320px" clearable>
                                  <Option value="beijing">New York</Option>
                                  <Option value="shanghai">London</Option>
                                  <Option value="shenzhen">Sydney</Option>
                              </Select>
                          </FormItem>
                          <FormItem label="备注">
                              <Input v-model="model.remark" type="textarea" :rows="6" placeholder="" style="width: 780px"/>
                          </FormItem>

            </Form>
        </div>
    </div>
</template>

<script>
import util from '@/libs/util.js'

export default {
  name: 'cscpPostForm',
  data () {
    return {
      // ID
      id: null,
      saveLoading: false,
      // 表单参数
      model: {
        postId: null,
        postCode: null,
        postName: null,
        postSort: null,
        status: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      }
    }
  },
  mounted () {
    if (typeof (this.$route.query.id) !== 'undefined' && this.$route.query.id !== null && this.$route.query.id !== '') {
      this.id = this.$route.query.id
      // ID存在渲染表单
      this.initForm()
    }
  },
  methods: {
    // 保存
    save () {
      if (this.id) {
        this.update()
      } else {
        this.create()
      }
    },

    create () {
      let _this = this
      _this.saveLoading = true
      const [url, httpConfig] = [
        '/api/cscpPosts',
        {
          headers: {
            'Content-Type': 'application/json'
          }
        }
      ]
      _this.$http.post(url, this.model, httpConfig).then(function (response) {
        _this.$Notice.success({
          title: '保存成功!'
        })
        _this.back()
      })
        .catch(function (error) {
          _this.$Notice.error({
            title: '保存失败!'
          })
          _this.saveLoading = false
          console.log(error)
        })
    },

    update () {
      let _this = this
      _this.saveLoading = true
      const [url, httpConfig] = [
        '/api/cscpPosts',
        {
          headers: {
            'Content-Type': 'application/json'
          }
        }
      ]
      _this.$http.put(url, this.model, httpConfig).then(function (response) {
        _this.$Notice.success({
          title: '更新成功!'
        })
        _this.back()
      })
        .catch(function (error) {
          _this.$Notice.error({
            title: '更新失败!'
          })
          _this.saveLoading = false
          console.log(error)
        })
    },

    // 渲染表单
    initForm () {
      let _this = this
      _this.$http.get('/api/cscpPosts/' + this.id).then(function (response) {
        let tem = response.data
        _this.model.postId = tem.postId,
        _this.model.postCode = tem.postCode,
        _this.model.postName = tem.postName,
        _this.model.postSort = tem.postSort,
        _this.model.status = tem.status,
        _this.model.createBy = tem.createBy,
        _this.model.createTime = tem.createTime,
        _this.model.updateBy = tem.updateBy,
        _this.model.updateTime = tem.updateTime,
        _this.model.remark = tem.remark
      })
        .catch(function (error) {
          _this.$Notice.error({
            title: '获取表单失败!'
          })
          console.log(error)
        })
    },

    // 返回,需要自定义配置路由
    back () {
      let _this = this
      let tagName = _this.$route.name
      _this.$store.commit('removeTag', tagName)
      _this.$store.commit('closePage', tagName)
      _this.$router.push({
        name: 'cscp_post'
      })
    }
  }
}
</script>

<style scoped>
    .button-area {
        display: flex;
        justify-content: flex-end;
    }

    .button-right-left {
        margin-right: 15px;
    }

    .button-right {
        margin-right: 55px;
    }

    .form-area {
        margin-top: 40px;
        display: flex;
        justify-content: center;
    }

    .form-flex {
        display: flex;
        justify-content: space-between;
    }

    .model-hidden{
        display: none;
    }

</style>
